/*
 * @Author: mikey.zhaopeng 
 * @Date: 2019-09-07 13:03:33 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2019-09-17 22:10:40
 左侧栏和头部菜单是联动效果
 */

<template>
  <div class="layout">
    <el-container class="z_container">
      <el-header style="background:#545c64;" class="d-flex align-items-center">
        <!-- logo -->
        <a href="index" class="h5 text-light mb-0 mr-auto">{{$conf.logo}}</a>
        <el-menu
          :default-active="navBar.active"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            :index="index|numToString"
            v-for="(item,index) in navBar.list"
            :key="item.name"
          >{{item.name}}</el-menu-item>

          <el-submenu index="100">
            <template slot="title">
              <el-avatar
                size="small"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              ></el-avatar>summer
            </template>
            <el-menu-item index="5-1">修改</el-menu-item>
            <el-menu-item index="5-2">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-container style="height:100%;">
        <!-- 左侧菜单栏 -->
        <el-aside width="200px">
          <el-menu :default-active="slideMenuActive" @select="slideSelect" style="height:100% ">
            <el-menu-item
              :index="index|numToString"
              v-for="(item,index) in slideMenus"
              :key="index"
            >
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="bg-light" style="padding:0px;position:relative;">
          <!-- 面包屑 -->
          <div v-if="bran.length>0" class="bg-white mb-3" style="padding: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                v-for="(item,index) in bran"
                :to="{ path: item.path }"
                :key="index"
              >{{item.title}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div style="padding: 20px;">
            <router-view></router-view>
          </div>
          <!-- 回到顶部 -->
          <el-backtop target=".el-main" :bottom="100">
            <div
              style="{
                height: 100%;
                width: 100%;
                background-color: #f2f5f6;
                box-shadow: 0 0 6px rgba(0,0,0, .12);
                text-align: center;
                line-height: 40px;
                color: #1989fa;
              }"
            >UP</div>
          </el-backtop>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import common from "../common/mixins/common";
export default {
  name: "layout",
  // 使用mixins混入方法引入公共方法
  mixins: [common],
  data() {
    return {
      navBar: [],
      // bran面包屑
      bran: []
    };
  },
  created() {
    // 引入config文件配置好的菜单内容
    this.navBar = this.$conf.navBar;
  },
  mounted() {
    //刷新的时候初始化菜单
    this.__initNavBar();
    this.getRouterBran();
  },
  watch: {
    $route(to, from) {
      // 防止刷新的时候导航默认回到初始页面
      localStorage.setItem(
        "navActive",
        JSON.stringify({
          top: this.navBar.active || "0",
          left: this.slideMenuActive || "0"
        })
      );
      // 监听路由面包屑时时更新,
      this.getRouterBran();
    }
  },
  computed: {
    // 通过计算属性对左侧菜单简洁赋值
    slideMenuActive: {
      get() {
        return this.navBar.list[this.navBar.active].subActive || "0";
      },
      set(val) {
        this.navBar.list[this.navBar.active].subActive = val;
      }
    },
    // 用于左侧栏监听点击事件,同步于头部菜单
    slideMenus() {
      // 如果菜单中没有submenu就返回空数组
      return this.navBar.list[this.navBar.active].submenu || [];
    }
  },
  methods: {
    //始始化菜单
    __initNavBar() {
      let r = localStorage.getItem("navActive");
      if (r) {
        r = JSON.parse(r);
        this.navBar.active = r.top;
        this.slideMenuActive = r.left;
      }
    },
    // 获面包屑导航
    getRouterBran() {
      // 对路由中的name过滤
      let b = this.$route.matched.filter(v => v.name);
      // 定义空数组接收路由
      let arr = [];
      b.forEach((v, k) => {
        // 过滤掉layout,index,路由
        if (v.name === "index" || v.name === "layout") return;
        arr.push({
          name: v.name,
          path: v.path,
          title: v.meta.title
        });
      });
      if (arr.length > 0) {
        arr.unshift({ name: "index", path: "/index", title: "后台首页" });
      }
      this.bran = arr;
    },
    // 头部菜单选中后的样式
    handleSelect(key, keyPath) {
      if (key == "5-1") {
        return console.log(`修改资料`);
      }
      if (key == "5-2") {
        return console.log(`退出登录`);
      }
      // 对选中的key赋值给到navbar中的active,方便侧栏对第二层数组进行遍历
      this.navBar.active = key;
      //刷新点击的时候左侧回到第0个位置
      this.slideMenuActive = "0";
      // 点击的时候左侧回到当前激活的那一菜单
      if (this.slideMenus.length > 0) {
        this.$router.push({
          name: this.slideMenus[this.slideMenuActive].pathname
        });
      }
    },
    //侧栏选中样式
    slideSelect(key, keyPath) {
      this.slideMenuActive = key;
      // 点击左侧菜单出现对应内容
      this.$router.push({ name: this.slideMenus[key].pathname });
    }
  }
};
</script>

<style  scoped>
.z_container {
  user-select: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>